import { Component } from "react";
import Header from "../component/Header/header";
import { Getscreenroominfo } from "../apis/movie";
import style from './seat.module.css'

export default class Seat extends Component {
    state = {
        seats: [],  // 板凳的数组
        selectseats: [] // 被选中的凳子
    }

    // 发送请求获取座位信息
    async componentDidMount() {
        let res = await Getscreenroominfo({ sid: sessionStorage.getItem('tintid') })
        // console.log(res);

        // 添加一个字段：凳子是否被点击字段
        for (let obj of res.data.seats) {
            for (let seat of obj) {
                seat.click = 0
            }
        }

        this.setState({
            seats: res.data.seats
        })
        // console.log(this.state.seats);
    }

    render() {
        // let {seats} = this.seats;
        return (
            <>
                <Header title="Seat" onBack={this.onBack} />

                {/* 左侧列 */}
                <div className={style.seatLefBar}>
                    {this.state.seats.map((obj, i) => <div key={i} className={style.seatLeftDiv}>
                        {i + 1}
                    </div>)}
                </div>

                {/* 右侧列 */}
                <div className={style.seatRightBar}>

                    {this.state.seats.map((smallarr, i) => <div key={i} className={style.seatRightDiv}>
                        {
                            smallarr.map((seatobj, columi) => {
                                // 判断是否购买
                                if (seatobj.buy == 1) {
                                    return <img src={require('../asset/images/icon_2.png')} key={seatobj.id} style={{ width: '28px', height: '28px' }} />
                                } else if (seatobj.seat == 1) {
                                    // seat 为1时 凳子有两种状态
                                    if (seatobj.click == 1) {
                                        // 正在购买
                                        return <img src={require('../asset/images/icon_3.png')} key={seatobj.id} style={{ width: '28px', height: '28px' }} onClick={this.clickSeat.bind(this, seatobj.id, i, columi)}></img>
                                    } else {
                                        // 空座位
                                        return <img src={require('../asset/images/icon_1.png')} key={seatobj.id} style={{ width: '28px', height: '28px' }} onClick={this.clickSeat.bind(this, seatobj.id, i, columi)}></img>
                                    }
                                } else {
                                    // 返回没有凳子
                                    return <img key={seatobj.id} style={{ opacity: 0, width: '28px', height: '28px' }}></img>
                                }
                            })
                        }
                    </div>)}
                </div>

                {/* 当前选中的凳子 */}
                <div className={style.colums}>
                    {this.state.selectseats.map(item => <div className={style.colum} key={item.id}>
                        {`第${item.row}排,第${item.columi}列`}
                    </div>)}
                </div>

                {/* 购买按钮 */}
                <div className={style.buyBtnDiv}>
                    <button className={style.buyBtn} onClick={this.clickBuyTick}>
                        <div>确认选座</div>
                    </button>
                </div>

            </>
        )
    }
    onBack = () => {
        this.props.history.goBack();
    }
    clickSeat(seatid, i, columi) {
        let { selectseats } = this.state
        // console.log(seatid,i+1,columi+1);

        for (let samllarr of this.state.seats) {
            for (let seat of samllarr) {
                if (seat.id == seatid) {
                    // 板凳点击取反  如果0 变成1  如果1 变成0
                    seat.click = seat.click == 1 ? 0 : 1
                    // 根据凳子状态来决定 添加 还是 删除
                    if (seat.click == 1) {
                        selectseats.push({
                            id: seat.id, // 点击的凳子的id
                            row: i + 1,  // 点击凳子 行
                            columi: columi + 1  // 点击的 列
                        })
                    } else {
                        for (let i = 0; i < selectseats.length; i++) {
                            if (seat.id == selectseats[i].id) {
                                selectseats.splice(i, 1)
                                break
                            }
                        }
                    }
                }
                // console.log(seat);
            }
        }
        this.setState({
            seats: this.state.seats,
            selectseats: selectseats
        })
    }

    // 购票
    clickBuyTick = () => {
        // this.state.selectseats  // 选中的数组
        // let res = await this.clickBuyTick({
        //     sid: 
        // })

        /**
         * 服务器提交数据的两种格式：
         * 1. 键值对:
         *   name = '张三' & age = 18  qs.stringfy()
         * 2. JSON:
         *   { name:'张三'，age:'18'}  json.stringfy()
         * 
         */

    }
}